<template>
    <div :style="{ padding: '10px', background: '#fff' }">
        <div>{{ asyncRoutes }}</div>
        <div>{{ getAsyncRoutes }}</div>
        <div @click="BsetNames1">修改 username ： 李四</div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useState, useGetters, useMutations, useActions } from "@hooks/store/index";
export default defineComponent({
    setup() {
        const asyncRoutes = useState(["asyncRoutes"])
        const userName = useState("user", ["name"])
        const getAsyncRoutes = useGetters(['getAsyncRoutes'])
        const getusername = useGetters({
            name: 'user/name'
        });
        const storeMutations2 = useMutations(['increment'])
        const storeMutations = useMutations({
            setName: 'user/setName'
        })
        const storeActions = useActions(["setAsyncRoutes"]);
        const setNameAction = useActions("user", ["setName"]);
        const storeActions2 = useActions({
            setName: 'user/setName'
        });
        const BsetNames1 = () => {
            setNameAction.setName("李四");
        };
        // console.log(asyncRoutes.asyncRoutes.value)
        // console.log(userName.name.value)
        // console.log(getAsyncRoutes.getAsyncRoutes.value)
        // console.log(getusername.name.value)
        return {
            BsetNames1,
            ...getAsyncRoutes,
            ...asyncRoutes
        };
    },
});
</script>
<style lang="less" scoped>
</style>
